<template>
    <div class="bg">
        <div class="bg-fliter"></div>
        <div class="container">
            <div class="left_img"></div>
            <div class="login">
               <h2>后台管理系统</h2>
                <el-form label-position="top" size="mini" status-icon label-width="100px" class="demo-ruleForm">
                  <el-form-item prop="pass" size="mini">
                    <p>用户名</p>
                    <el-input type="text" v-model="username" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item prop="pass" size="mini">
                    <p>密码</p>
                    <el-input type="password" v-model="password" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button size="mini" round type="primary" @click="submitForm('ruleForm')">登录</el-button>
                    <el-button size="mini" round @click="resetForm()">重置</el-button>
                  </el-form-item>
                </el-form>
            </div>
        </div>

    </div>
</template>

<script>
import * as api from '@/api/login'
export default {
    name:'Login',
    data(){
      return{
        username:'',
        password:''
      }
    },
    methods: {
      submitForm(formName) {
        console.log(this.username,this.password)
        if(this.username!=''&&this.password!=''){
          api.Login({userName:this.username,password:this.password}).then((data)=>{
            console.log(data)
            localStorage.setItem('token',data.data.token)
            if(data.data.code =='success'){
              this.$alert('登录成功', '提示信息', {
                confirmButtonText: '确定',
                type: 'success',
                center: true,
              });
              this.$router.push('/index')
            }else{
              this.$alert('用户名和密码错误', '提示信息', {
                confirmButtonText: '确定',
                type: 'warning',
                center: true,
              });
            }
          })
        }else{
          this.$alert('请输入用户名或密码', '提示信息', {
          confirmButtonText: '确定',
          type: 'warning',
          center: true,
        });
        }
      },
      resetForm() {
        this.username = '';
        this.password='';
      }
    }
}
</script>

<style scoped>
.bg{
    height:100%;
    background:url(../images/bg_2.jpg) no-repeat;
    background-size:100%;
    position: relative;
}
.container{
    width:50%;
    height:300px;
    border:5px solid rgba(255, 255, 255, 0.224);
    margin:auto;
    position: absolute;
    left:0;right:0;top:0;bottom:0;
    display: flex;
    justify-content: space-between
}
.bg-fliter{
    position: absolute;
    width:100%;
    height:100%;
    background:rgba(100,100,100,.1);
}
.container .left_img{
    flex:1;
    background:url(../images/bg_4.jpg) no-repeat;
    opacity: .9;
    background-size:140%;
    background-position: -80px 0;
}
.login{
    width:60%;
    background:#fdfdfdb3;
    padding:20px 20px 0;
    box-sizing: border-box;
    transform:scale(1)
}
.login p{
    color:#333;
    margin:0;
    font-size:12px;
    line-height: 16px;
}
h2{
  font-size:24px;
  text-align: center;
  margin-bottom:10px;
}
.el-button{
  background:rgb(21, 160, 139);
  padding:8px 20px;
  border:2px solid rgb(21, 160, 139);
}
.el-button:nth-of-type(2){
  background:none;
  border:2px solid #ff2c61;
  box-sizing: border-box;
}
.el-button:nth-of-type(2) span{
  color:#aaa;
}
</style>


